<h3>Top Heroes</h3>
<div class="grid grid-pad">
    <a *ngFor="let hero of heroes; trackBy: trackByHeroes" [routerLink]="['/heroes/detail', hero.id]" class="col-1-4">
        <div class="module hero">
            <h4>{{hero.name}}</h4>
        </div>
    </a>
</div>
<hero-search></hero-search>

<br />

<div>
    <ul>
        <li [@heroState]="heroState" (click)="toggleState()">Hero</li>
    </ul>
</div>

<br />

<!--<div class="container">
    <h1>Reactive Forms</h1>
    <hero-detail-reactive-form></hero-detail-reactive-form>
</div>-->